<template>
<div>
  <!-- 用户列表 -->
  <el-table 
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="用户编号"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="用户名">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column 
      label="生日" 
      prop="birthday">
    </el-table-column>
    <el-table-column 
      label="地址" 
      prop="address">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input 
          style="width: 200px"
          v-model="search"
          size="mini"
          placeholder="输入名字关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加用户信息form弹窗-->
  <el-dialog 
    title="添加用户信息" 
    center 
    width = "30%"
    :show-close="false" 
    :visible.sync="dialogUserFormVisible"
    @closed="cleanForm">
    <el-form ref="form" :model="form" label-position="left" label-width="80px" label-suffix=":"  >
      <el-form-item label="姓名">
        <el-input maxlength="10" style="width: 150px;" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <!-- 这里ElementUi有Bug，2020-5-28会少一天，加上value-format="yyyy-MM-dd"可以修复 -->
        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.birthday" style="width: 150px;"></el-date-picker>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input type="input" v-model="form.address"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="changeButton">确 定</el-button>
      <el-button @click="dialogUserFormVisible = false;">取 消</el-button>
    </div>
  </el-dialog>

  <el-row>
    <el-col :span="2">
      <!-- 添加用户信息按钮 -->
      <el-button style="margin-top: 10px" type="success" size="mini" @click="cleanForm;dialogUserFormVisible = true;">
          添加
      </el-button>
    </el-col>
    <el-col :span="10" :offset="12">  
      <!-- 分页按钮 -->
      <div class="block">
      <el-pagination
        align="right"
        @current-change="handleCurrentChange"
        prev-text="上一页"
        next-text="下一页"
        :page-size="pageSize"
        :current-page="currentPage"
        layout=" prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
'use strict'
export default {
    name:'Index',
    data() {
      return {
        search:'',
        pageTotal:0,
        currentPage:1,
        pageSize:13,
        show:false,
        dialogUserFormVisible: false,
        formLabelWidth: '120px',
        t: 0,
        
        tableData: [],

        form: {
          name:'',
          birthday:new Date(),
          sex:'男',
          address:'',
        },
        tform:{}
      }
    },
    methods: {
        // 清除用户信息form的数据
        cleanForm() {
          this.form = {birthday:new Date(), sex:'男'};
        },
        // 列表编辑用户信息
        handleEdit(index, row) {
          // 这里不能直接this.form = row
          // 注意深浅拷贝
          this.form = JSON.parse(JSON.stringify(row));
          this.tform = row;
          this.dialogUserFormVisible = true;
        },
        // 修改当前页
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage;
          this.findAll(currentPage, this.pageSize);
        },
        // 添加/修改用户信息
        changeButton() {
          if(this.form.id != null && this.form.id != '') {
            this.uppdateUser();
          } else {
            this.addUser();
          }
        },
        // 添加用户信息
        addUser() {
          this.$http.post("http://localhost:8989/user/save",this.form).then(res => {
            if(res.data.status) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              this.form = {birthday:new Date(), sex:'男'};
              this.dialogUserFormVisible = false;
              this.pageTotal++;
              this.currentPage = parseInt((this.pageTotal-1)/this.pageSize) + 1;
              this.findAll(this.currentPage, this.pageSize);
            } else {
              this.$message.error(res.data.msg);
            }
          })
        },
        // 修改用户信息
        uppdateUser() {
            if(this.form.name == this.tform.name) this.form.name = null;
            if(this.form.birthday == this.tform.birthday) this.form.birthday = null;
            if(this.form.sex == this.tform.sex) this.form.sex = null;
            if(this.form.address == this.tform.address) this.form.address = null;
            this.$http.post("http://localhost:8989/user/update",this.form).then(res => {
            if(res.data.status) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              });
              this.dialogUserFormVisible = false;
              this.findAll(this.currentPage, this.pageSize);
            } else {
              this.$message.error(res.data.msg);
            }
            this.form = {birthday:new Date(), sex:'男'};
          })
        },
        // 删除用户信息
        handleDelete(index, row) {
          this.$confirm('确认删除该用户?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.post("http://localhost:8989/user/delete?id=" + row.id).then(res => {
              if(res.data.status) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.pageTotal--;
                this.t = parseInt((this.pageTotal-1)/this.pageSize) + 1;
                this.currentPage = this.currentPage <= this.t ? this.currentPage : this.t;
                this.findAll(this.currentPage, this.pageSize);
                this.currentPage = this.currentPage;
              } else {
                this.$message.error(res.data.msg);
              }
            })
          })
        },
        // 分页获取用户列表
        findAll(currentPage, pageSize) {
          currentPage = currentPage ? currentPage : 1;
          pageSize = pageSize ? pageSize : this.pageSize;
          this.$http.get("http://localhost:8989/user/findByPage?currentPage=" + currentPage + "&pageSize=" + pageSize).then(res => {
            this.tableData = res.data.user;
            this.pageTotal = res.data.pageTotal
          })
        },
    },
    created () {
        this.findAll();
    }
}
</script>